'use strict';
import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import ListView from '../list/ListView';
import Images from '../../asset';
import { diffTime } from '../../util/Tool';
import ImageView from '../common/ImageView';
import {HorizontalLine} from "../common/CommonLine";


class MineList extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
        };
        this.page = 1
    }

    componentDidMount() {
        this.requestDataSources()
    }

    componentDidUpdate(prevProps, prevState) {

    }

    requestDataSources = async (others = {}) => {
        const { uri, query } = this.props;
        const limit = 10;
        let data = {
            limit,
            page: this.page,
            ...query,
            type:'my',
            create_user: global.secretKey
        };
        const result = await Services.post(uri, data);
        // console.log('我的----',query.reply_type,result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            if (this.page === 1) {
                this.setState({ dataSource: result.data })
            } else if (this.page > 1 && result.data.length !== 0) {
                let oldData = this.state.dataSource.slice();
                oldData = oldData.concat(result.data);
                this.setState({ dataSource: oldData })
            }
        }
        this._listViewRef && this._listViewRef.stopRefresh()
        this._listViewRef && this._listViewRef.stopEndReached({ allLoad: result.data.length < limit })

    };


    _onPressItem = (item, index) => {

    };

    _onRefresh = (stopRefresh) => {
        this.page = 1
        this.requestDataSources()
    };

    _onEndReached = (stopEndReached) => {
        this.page++
        this.requestDataSources()
    };

    _onUserPress = (userId) => {
        RouterHelper.navigate('', 'UserInfo', { user_id: userId });
    };

    _onArticlePress = (informationId) => {
        RouterHelper.navigate('', 'ArticleDetails', { information_id: informationId });
    };

    renderTopicItem = (props) => {
        const {item,index} = props;
        // console.log('topic---item---------',item);
        const width = SCREEN_WIDTH * 0.229;
        const height = width * 0.663;
        return (
            <View style={styles.topicItem}>
                <View style={styles.topicHeadRow}>
                    <Text style={styles.topicCommentText}>评论：</Text>
                    <Text style={styles.topicItemTime}>{diffTime(item.create_time)}</Text>
                </View>
                <Text style={styles.topicItemContent}>{item.reply_content}</Text>
                <View style={[styles.topicContain,{marginLeft:12}]}>
                    <ImageView
                        style={[styles.topicImage,{width,height}]}
                        source={item.img_demo ? {uri: item.img_demo} : Images.img_shop_default}
                    />
                    <Text style={styles.topicContent}>{item.information_title}</Text>
                </View>
            </View>
        )
    };

    renderReplyItem = (props) => {
        const {item,index} = props;
        // console.log('reply---item---------',item);
        const width = SCREEN_WIDTH * 0.229;
        const height = width * 0.663;
        return (
            <View style={styles.replyContainer}>
                <View style={styles.headRow}>
                    <View style={styles.headRowUser}>
                        <ImageView
                            resizeMode={'cover'}
                            source={item.user_img_by ? {uri: item.user_img_by} : Images.icon_default_avatar}
                            style={styles.headUserIcon}
                        />
                        <Text style={styles.headUserText}>{item.user_nickname_by}</Text>
                    </View>
                    <Text style={styles.headReplyTime}>{diffTime(item.create_time)}</Text>
                </View>
                <Text style={styles.replyContent}>{item.reply_content}</Text>
                <View style={styles.topicContain}>
                    <ImageView
                        style={[styles.topicImage,{width,height}]}
                        source={item.img_demo ? {uri: item.img_demo} : Images.img_shop_default}
                    />
                    <Text style={styles.topicContent}>{item.information_title}</Text>
                </View>
            </View>
        )
    };

    renderItem = (info) => {
        const {item,index} = info;
        const {type} = this.props;
        return (
            type === 'reply' ?
                <this.renderReplyItem
                    item={item}
                    index={index}
                /> :
                <this.renderTopicItem
                    item={item}
                    index={index}
                />
        )
    };

    _renderItemSeparator = (info) => {
        return (
            <HorizontalLine style={styles.sep} />
        )
    };

    _keyExtractor = (item, index) => {
        return `item${index}`
    };

    _captureRef = (v) => {
        this._listViewRef = v
    };

    render() {
        const { dataSource } = this.state;
        return (
            <ListView
                ref={this._captureRef}
                initialRefresh={false}
                enableLoadMore={true}
                enableRefresh={true}
                data={dataSource}
                keyExtractor={this._keyExtractor}
                renderItem={this.renderItem}
                ItemSeparatorComponent={this._renderItemSeparator}
                onRefresh={this._onRefresh}
                onEndReached={this._onEndReached}
                ListHeaderComponent={null}
            />
        );
    }
}

const styles = StyleSheet.create({
    sep: {
        marginVertical: 10,
        height: Theme.minPixel,
        backgroundColor: '#dbdbdb',
        marginLeft: 15,
        marginRight: 15,
    },
    container: {
        flex: 1
    },
    button: {
        paddingVertical: 5,
        marginLeft: 10,
        backgroundColor: 'transparent',
    },
    iconStyle: {
        width: 15,
        height: 15,
        marginRight: 10,
        // backgroundColor: 'red',
    },
    titleStyle: {
        fontSize: FontSize(14),
        // color: '#4185ec'
        color: '#666666'
    },
    itemView: {
        flexDirection: 'row',
        paddingVertical: 5,
    },
    avatar: {
        width: 30,
        height: 30,
        resizeMode: 'contain',
    },
    articleView: {
        flexDirection: 'row',
        backgroundColor: '#f3f3f3',
        borderRadius: 7,
        marginRight: 15,
        paddingVertical: 5,
        marginTop: 5,
    },
    articleImage: {
        width: 86,
        height: 57,
        borderRadius: 7,
        marginLeft: 13,
    },
    nickname: {
        fontSize: FontSize(7),
        color: '#939393',
        marginLeft: 10,
    },
    time: {
        fontSize: FontSize(7),
        color: '#939393',
        marginRight: 15,
    },
    comment: {
        fontSize: FontSize(12),
        color: '#4b4b4b',
        marginLeft: 10,
    },
    articleText: {
        fontSize: FontSize(10),
        color: '#4a4a4a',
        marginLeft: 10,
    },
    cusMargin: {
        marginLeft: 27
    },
    custome: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingVertical: 5
    },
    custt: {
        flexDirection: 'row',
        paddingVertical: 5
    },
    //replyItem
    replyContainer: {
        marginVertical: 10,
        marginLeft: 27,
        marginRight: 15,
    },
    headRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    headRowUser: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    headUserIcon: {
        width: 30,
        height: 30,
        borderRadius: 30/2,
    },
    headUserText: {
        marginLeft: 12,
        fontSize: FontSize(12),
        color: "#939393",
    },
    headReplyTime: {
        fontSize: FontSize(9),
        color: "#939393",
    },
    replyContent: {
        marginLeft: 42,
        fontSize: FontSize(14),
        color: "#4b4b4b",
        marginTop: 5,
    },
    topicContain: {
        backgroundColor: "#f3f3f3",
        marginLeft: 42,
        marginTop: 10,
        paddingVertical: 6,
        paddingHorizontal: 7,
        flexDirection: 'row',
    },
    topicImage: {
        borderRadius: 7,
    },
    topicContent: {
        marginLeft: 10,
        marginTop: 3,
        fontFamily: "PingFangSC-Regular",
        fontSize: FontSize(12),
        lineHeight: 18,
        color: "#4a4a4a",
        flex: 1,
    },
    //topicItem
    topicItem: {
        marginHorizontal: 15,
        marginVertical: 10,
    },
    topicHeadRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    topicCommentText: {
        fontSize: FontSize(14),
        color: "#939393",
    },
    topicItemTime: {
        fontSize: FontSize(9),
        color: "#939393",
    },
    topicItemContent: {
        marginLeft: 12,
        fontSize: FontSize(14),
        color: "#4b4b4b",
        marginTop: 5,
    },
});

export default MineList